<template>
  <div style="height: 100%">
    <a-textarea readonly @click="openModal" v-model="title" placeholder="点击配置公式"
                style="min-height: 80px; max-height: 200px; height: 100%; cursor: pointer"/>
    <HModal :width="1000" :height="800" @mousedown.native.stop
            :visible="visible" :title="modalTitle" @cancel="close" @ok="handleOK">
      <FormulaConfig
        :getFieldById="getFieldById"
        :actionType="actionType"
        :variableContainerConfig="variableContainerConfig"
        :formDefinition="this.formDefinition"
        v-model="tempFormula"/>
    </HModal>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import HModal from '@comp/hhd/HModal/HModal.vue';
import FormulaConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaConfig.vue';
import {postAction} from '@api/manage';

export default {
  name: 'FormulaTextAreaConfig',
  components: {FormulaConfig, HModal},
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    getFieldById: createProps(Function, undefined),
    actionType: createProps(String),
    modalTitle: createProps(String, '编辑公式'),
    value: createProps(String),
    title: createProps(String),
    variableContainerConfig: createProps(Object),
    formDefinition: createProps(Object, createFormDefinition),
  },
  data() {
    return {
      visible: false,
      tempFormula: undefined
    };
  },
  methods: {
    handleOK() {
      if (!this.tempFormula) {
        this.$emit('update:value', undefined);
        this.$emit('update:title', undefined);
        this.close();
        return;
      }
      this.loading = true
      postAction('/flow/formula/translate', {formula: this.tempFormula}).then(data => {
        if (data.success) {
          this.$emit('update:value', this.tempFormula);
          this.$emit('update:title', data.result.formulaText);
          this.close();
        } else {
          this.$notification.error({message: data.message || data.result.message, duration: 3})
        }
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
        this.$notification.error({message: error, duration: 3})
      })
    },
    close() {
      this.visible = false;
    },
    openModal() {
      this.tempFormula = this.value;
      this.visible = true;
    },
  }
};
</script>